<template>
  <div class="container">
    <float-menu class="float-menu" :titles="headerName">
    </float-menu>
    <div class="main-content">
      <div class="section" :id="headerName[0]">
        <h2>{{headerName[0]}}</h2>
        <site></site>
      </div>
      <div class="section" :id="headerName[1]">
        <h2>{{headerName[1]}}</h2>
        <layout></layout>
      </div>
      <div class="section" :id="headerName[2]">
        <h2>{{headerName[2]}}</h2>
        <history></history>
      </div>
      <div class="section" :id="headerName[3]">
        <h2>{{headerName[3]}}</h2>
        <problems></problems>
      </div>
      <div class="section" :id="headerName[4]">
        <h2>{{headerName[4]}}</h2>
        <strategy></strategy>
      </div>
    </div>
    <div class="safe-area"></div>
  </div>
</template>

<script>
import FloatMenu from '../components/FloatMenu.vue'
import Site from '../components/Site.vue'
import Layout from '../components/LayoutAnalysis.vue'
import History from '../components/History.vue'
import Problems from '../components/Problems.vue'
import Strategy from '../components/Strategy.vue'
import { menuAction } from '../mixin.js'

export default {
  name: 'SiteSurvey',
  components:{
    FloatMenu, Site, Layout, History, Problems, Strategy
  },
  data(){
    return{
      headerName:['地段区位', '大院格局', '无序建设史', '现状问题', '策略与手段'],
    }
  },
  mixins: [ menuAction ]
}
</script>

<style scoped>
.main-content > .section{
  width: 100%;
}

</style>